<template>
  <el-container>
    <el-header class="header">
      <div class="con">
        
          <div class="lefta">
            <img id="idImg" src="../assets/u27.png" alt />
            <p class="leftP">动态管理</p>
          </div>
          <div class="righta">
            <img class="img1 imgimg" src="../assets/u736.png" alt />
            <img class="img2 imgimg" src="../assets/u735.png" alt />
            <img class="img3 imgimg" src="../assets/u28.jpg" alt />
            <p class="rightP">{{this.$store.state.loginName}}</p>
          </div>
      </div>
    </el-header>
    <el-main class="main">
      <div class="conHeader">
        <div class="conHeader1">
          <div class="text">
            <p>
              <span>动态分类</span>
            </p>
          </div>
          <div class="xian"></div>
        </div>
        <div class="conHeader2">
          <div class="text">
            <p>
              <span><a class="al" href="./showOff-item2">动态列表</a></span>
            </p>
          </div>
        </div>
        <div class="xian1"></div>
        <div class="shu11">
          <div class="shuLeft">校区:</div>
          <div class="shu">
          
          <div class="baoHe">
              <el-select v-model="value" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
          </div>
        </div>
        </div>
      </div>

      <div class="biao">
        <div class="biaoMain">
          <div class="biaoTou">
            <p class="leftTou">
              <span>动态分类数目</span>
              <span style="color:#FF4F00;">{{tableData.length}}</span>
              <span>个</span>
            </p>
            <div class="anNiu">
              <div class="tianJia">
               <el-button @click="add" style="background-color:#ff4f00" size="small" round> + 添加</el-button>
              </div>
              <div class="shanChu">
                <el-button @click="del" size="small" round>删除</el-button>
              </div>
            </div>
          </div>

          <div class="biaoCon">
            <el-table
              ref="multipleTable"
              :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="分类名称" width="280">
                <template slot-scope="scope"><h3>{{ scope.row.date }}</h3></template>
              </el-table-column>
              <el-table-column prop="name" label="动态数" width="380"></el-table-column>
              <el-table-column prop="address" label="创建时间" width="480" show-overflow-tooltip></el-table-column>
               <el-table-column class="content-text" fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    size="small"
                    @click="[handleEdit(scope.$index, scope.row,scope),dialogFormVisible = true]"
                  >编辑</el-button>
                 
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pagesize"
              layout="prev, pager, next, sizes, total, jumper"
              :total="this.tableData.length"
            ></el-pagination>
          </div>
        </div>
      </div>
       <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
                    <el-form ref="form" :model="form" label-width="70px">
                      <el-form-item label="标题名称">
                        <el-input v-model="form.id"></el-input>
                      </el-form-item>
                      <el-form-item label="动态分类">
                        <el-input v-model="form.name"></el-input>
                      </el-form-item>
                      <el-form-item label="上传时间">
                        <el-input v-model="form.tel"></el-input>
                      </el-form-item>
                      <el-form-item label="启用状态">
                        <el-input v-model="form.subject"></el-input>
                      </el-form-item>
                      <el-form-item label="设为主页">
                        <el-input v-model="form.calssNum"></el-input>
                      </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="editVisible = false">取 消</el-button>
                      <el-button type="primary" @click="saveEdit">确 定</el-button>
                    </span>
                  </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
let id = 0;

export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((item) => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2,
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        },
      },
       gridData: [
         {
          id:"",
          name:"",
          tel:"",
          subject:"",
          calssNum:""
        },
       ],
       dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
       options: [{
          value: '选项1',
          label: '宝安校区'
        }, {
          value: '选项2',
          label: '南山校区'
        }, {
          value: '选项3',
          label: '福田校区'
        }, {
          value: '选项4',
          label: '罗湖校区'
        }, {
          value: '选项5',
          label: '盐田校区'
        }],
        value: '',
      tableData: [
        {
          date: "这里是分类名称",
          name: "3",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里是分类名称",
          name: "4",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里是分类名称",
          name: "5",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里",
          name: "6",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里",
          name: "8",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里",
          name: "3",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里",
          name: "4",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里",
          name: "5",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里是分类名称",
          name: "6",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里是分类名称",
          name: "8",
          address: "2016-09-21  08:50:08",
          tian: "编辑222",
        },
        {
          date: "这里是分类名称",
          name: "3",
          address: "2016-09-21  08:50:08",
          tian: "编辑222",
        },
        {
          date: "这里是分类名称",
          name: "4",
          address: "2016-09-21  08:50:08",
          tian: "编辑222",
        },
        {
          date: "这里是分类名称",
          name: "5",
          address: "2016-09-21  08:50:08",
          tian: "编辑222",
        },
        {
          date: "这里是分类名称",
          name: "6",
          address: "2016-09-21  08:50:08",
          tian: "编辑222",
        },
        {
          date: "这里是分类名称",
          name: "8",
          address: "2016-09-21  08:50:08",
          tian: "编辑222",
        },
        {
          date: "这里是分类名称22222",
          name: "3",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里是分类名称22222",
          name: "4",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里是分类名称22222",
          name: "5",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里是分类名称22222",
          name: "6",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "这里是分类名称22222",
          name: "8",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
      ],
      editVisible: false, //编辑弹窗的显示隐藏
      // 分页器
      currentPage3: 1,
      pagesize: 5, //每页显示条数
      currpage: 1, //当前页码
      
    };
  },                                                       
  methods: {
    saveEdit(){
      
    },
    add:function(){
      this.tableData.push({
        date: "这里是分类名称",
          name: 8,
          address: Date.now(),
          tian: "编辑",
      })
      this.shuLiang++
    },
    del:function(index){
      this.tableData.splice(index,1)
      this.shuLiang--
    },
    // 编辑操作
    handleEdit(index, row, scope) {
      console.log(scope);
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },



    // 分页器
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    handleSelectionChange(val) {
      console.log(val);
    },
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
  },
};
</script>
<style>
.el-table_1_column_5 .cell{
  color:red;
}
</style>
<style scoped>
.al{
text-decoration:none;
color:#333;
}
.img1{
  width:18px;
  height:19px;
  margin:5px;
}
.img2{
  width:16px;
  height:21px;
  margin:5px;
}
.img3{
  width:24px;
  height:24px;
  margin:5px;
}
.con{
  display:flex;
  justify-content: space-between;
  text-align:center;
}
.lefta{
  display:flex;
  align-items: center;
}
.righta{
  width:200px;
  height:65px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

#idImg{
  width:20px;
  height:15px;
  margin:10px;
}
.imgimg{
  margin:10px;
  text-align: center;
  line-height:65px;
  align-items: center;
}
.leftP{
  margin-left:10px;
}
.biao{
  width: 100%;
  margin-left:20px;
}
.tianJia{
  margin:0 20px;;
}
.leftTou{
  padding:20px 30px 20px 30px;
}
.anNiu{
  margin:20px 30px 20px 30px;
}
.block {
  float: right;
}
.leftTou {
  margin-left: 45px;
  margin-top: 10px;
}
.biaoTou {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.anNiu {
  display: flex;
}
.tian {
  display: flex;
  width: 89px;
  height: 32px;
  background: inherit;
  background-color: rgba(255, 79, 0, 1);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
  color: #ffffff;
  line-height: 22px;
  text-align: center;
  margin: 5px;
  align-items: center;
}
.shan {
  display: flex;
  width: 71px;
  height: 32px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(217, 217, 217, 1);
  border-radius: 4px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.647058823529412);
  line-height: 22px;
  margin: 5px;
  align-items: center;
  text-align: center;
}
/* .shu {
  width: 200px;
  height: 80px;
} */
.shu11{
  display:flex;
  justify-content:left;
  align-items: center;
  width: 100%;
}
.shuLeft {
 display:flex;
  /* justify-content:space-between; */
  align-items: center;
  margin-left: -180px;
  margin-top:25px;

}
.baoHe {
  display:flex;
  /* justify-content:space-between; */
  align-items: center;
  margin-left:20px;
  margin-top:20px;
}
.conHeader {
  display: flex;
  margin-left: 20px;
  background: white;
  width: 100%;
  min-height: 130px;
  position: relative;
}
.xian1 {
  width: 100%;
  height: 1px;
  background: gray;
  position: absolute;
  top: 32px;
}
.xian {
  width: 89px;
  padding-top: 10px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 79, 0, 1);
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "PingFang-SC-Regular", "PingFang SC";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #ff4f00;
  text-align: left;
  line-height: 22px;
}
.text {
  font-size: 16px;
}
.text p span {
  padding-left: 10px;
}
.conHeader1 {
  min-width: 89px;
  height: 46px;
  font-size: 16px;
  color: #ff4f00;
  text-align: left;
  line-height: 22px;
}
.conHeader2 {
  min-width: 89px;
  height: 46px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.647058823529412);
  text-align: left;
  line-height: 22px;
  margin-left: 20px;
  margin-left: 30px;
}
.conHeader3{
  min-width: 89px;
  height: 46px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.647058823529412);
  text-align: left;
  line-height: 22px;
  margin-left: 20px;
  margin-left: 30px;
}
</style>